<template>
	<view class="container">
		<view class="tips">
			Hi，很高心见到你
		</view>
		<view class="title">
			请选择您的身份
		</view>
		<view class="card" @click="toPath('role_normal')">
			<view class="card-body">
				<image src="/static/images/authentication/nomal.png" mode="widthFix" style="width: 130rpx;"></image>
				<view class="card-text">
					我是个人 >
				</view>
			</view>
		</view>
		<view class="card" @click="toPath('role_comp')">
			<view class="card-body">
				<image src="/static/images/authentication/company.png" mode="widthFix" style="width: 130rpx;"></image>
				<view class="card-text">
					我是企业  >
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getRolePage} from "@/api/role.js"
	export default {
		data(){
			return {
				roleMap: {}
			}
		},
		onShow(){
			//获取的我认证列表
			getRolePage()
			.then(res => {
				this.roleMap = (res || []).reduce((next,value) => {
					next[value.role_type] = value
					return next
				},{})
				console.log(this.roleMap)
			})
		},
		methods: {
			toPath(type){
				const id = (this.roleMap[type] && this.roleMap[type].id)||''
				if(type == 'role_normal'){
					//个人认证
					uni.navigateTo({
						url: "/pages/authentication_nomal/index?id="+id
					})
				}else{
					//公司认证
					uni.navigateTo({
						url: "/pages/authentication_company/index?id="+id
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background: #649CF6 linear-gradient(360deg, #E9EEFC 0%, #E6E7FC 60%, #BDD2FD 86%, #BDD2FD 100%);
		display: flex;
		align-items: center;
		justify-content: space-around;
		min-height: 80vh;
	}
</style>
<style scoped lang="scss">
	.container {
		width: 630rpx;

		.tips {
			font-weight: 500;
			font-size: 31rpx;
			color: #313B73;
			line-height: 42rpx;
		}

		.title {
			font-weight: bold;
			font-size: 50rpx;
			color: #313B73;
			line-height: 90rpx;
		}

		.card {
			margin: 60rpx 0;
			width: 100%;
			background-color: #fff;
			height: 216rpx;
			background: #FFFFFF;
			border-radius: 29rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.card-body {
				display: flex;
				align-items: center;
				.card-text{
					margin-left: 40rpx;
					font-weight: bold;
					font-size: 38rpx;
					color: #000000;
				}
			}
		}
	}
</style>